<template>
  <view>
    <view class="search-box">
    <uni-search-bar @confirm="search" @input="input" :radius="20" cancelButton="none" :focus="true"></uni-search-bar>
    </view>
    
    <uni-list v-if="searchReslts.length > 0">
      <uni-list-item :ellipsis="1" showArrow :title="item.goods_name" v-for="item in searchReslts" :key="item.goods_id" :to="`../goods_detail/goods_detail?goods_id=${item.goods_id}`"/>
    </uni-list>
    
    <!-- 搜索历史 -->
    <view class="search-history-box" v-else>
      <view class="search-history">
        <text>搜索历史</text>
        <uni-icons type="trash" size="17" @click="clean"></uni-icons>
      </view>
      <view class="history-list">
        <uni-tag :text="item" v-for="(item,index) in histories" :key="index" @click="gotoGoodList(item)"></uni-tag>
        
      </view>
      
    </view>
  </view>
</template>

<script>
  export default {
    name: 'SearchPage',
    components:{
    },
    data() {
      return {
        timer: null,
        keyWord: '' ,// 搜索关键字
        searchReslts: [], // 搜索返回结果
        searchHistory: uni.getStorageSync('searchHistory') || [] // 搜索历史
      };
    },
    created(){
    },
    mounted(){
    },
    onLoad() {
    },
    computed:{
      histories() {
        return [...this.searchHistory].reverse()
      }
    },
    methods:{
      gotoGoodList(query) {
        uni.navigateTo({
          url:'../goods_list/goods_list?query=' + query.trim()
        })
      },
      clean(){
        this.searchHistory = []
        uni.setStorageSync('searchHistory',[])
      },
      input(val) {
        // 使用 防抖控制输入框
         if(this.timer) {
           clearTimeout(this.timer)
           this.timer = null
         }
       this.timer =  setTimeout(() => {
           this.keyWord = val
           this.getSearchResults()
         }, 500)
      },
     async getSearchResults() {
       if(this.keyWord.trim() === '') {
          this.keyWord = ''
          this.searchReslts = []
          return
       }
      let {data: {message, meta:{status}}} = await uni.$http.get('/api/public/v1/goods/qsearch',{query: this.keyWord})
      if(status !== 200 ) {
        return uni.$showMsg()
      }
      this.searchReslts = message
      this.saveSearchHistoryList()
      },
      // 存储搜索记录
      saveSearchHistoryList() {
        // 方式1 使用数组的方法
          const index = this.searchHistory.findIndex((item)=> {
            return item === this.keyWord
          })
          console.log(index)
          if(index !== -1) this.searchHistory.splice(index, 1)
          this.searchHistory.push(this.keyWord)
            
              // 方式2 使用set
             //  let set  = new Set(this.searchHistory)
             //  set.delete(this.keyWord)
             //  set.add(this.keyWord)
             //  this.searchHistory = [...set]
             uni.setStorageSync('searchHistory', this.searchHistory);
      }
    }
  }
</script>

<style lang="scss">
  .search-box {
    position: sticky;
    top: 0px;
    z-index: 999; 
  }
  
  .uni-tag {
   margin: 0px 7px;
  }
  
  .search-history {
      align-items: center;
    padding: 5px 5px;
    display: flex;
    justify-content: space-between;
    height: 40px;
  }
  
  
</style>
